<template>
  <div class="main">
    <div class="add" @click="goSearch()">搜索</div>
    <eagle-tabs
      v-model="idx"
      :title-active-color="'#fff'"
      color="rgb(155, 226, 237)"
      :title-inactive-color="'#ccc'"
      :background="'#383d40'"
      :line-width="80"
      @change="changeTabs"
      :dataSource="title"
    >
      <div class="main-content">
        <div v-if="idx == 0 || idx == 1">
          <eagle-dropdown-menu>
            <eagle-dropdown-item
              v-model="value1"
              :options="option1"
            ></eagle-dropdown-item>
          </eagle-dropdown-menu>
          <eagle-tree-select
            height="100vh"
            :items="list"
            :main-active-index.sync="active"
            @click-nav="clickNav"
          >
            <template #content>
              <div class="ins_content">
                <div class="imgs-list" v-for="(v, i) in children" :key="i">
                  <img
                    :src="baseUrl + v.Logo"
                    alt=""
                    @click="_goClassifysDetail(v)"
                  />
                  <div class="imgs-list-text">
                    {{ v.text }}
                  </div>
                </div>
              </div>
            </template>
          </eagle-tree-select>
        </div>
        <div v-if="idx == 2 || idx == 3 || idx == 5">
          <van-list :finished="finished" v-model="loading" @load="onLoad" finished-text="没有更多了">
            <div v-for="(v, i) in historyList" :key="i" class="history-content">
              <div>
                <div class="history-title">【检查对象】{{ v.CFullName }}</div>
                <div class="line"></div>
                <div class="history-title">【关键词】{{ v.Keyword }}</div>
                <div class="line"></div>
                <div>【隐患描述】{{ v.HiddenDangerDesc }}</div>
                <div>【整改建议】{{ v.CorrectiveAdvise }}</div>
                <div class="apply-area">
                  <div class="detail-collect">
                    <img
                      src="@/assets/Images/AppIcon/icon_list_industry.png"
                      alt=""
                    />
                    <span>适用地区:{{ v.ApplyArea }}</span>
                  </div>
                </div>
                <div class="apply-area">
                  <div class="detail-collect" v-if="idx == 5">
                    <div @click="getDetail(v)">
                      <img
                        src="@/assets/Images/AppIcon/icon_list_detail.png"
                        alt=""
                      />
                      <span>详细</span>
                    </div>

                    <div @click="Interest(v)">
                      <img
                        src="@/assets/Images/AppIcon/icon_list_tracking.png"
                        alt=""
                      />
                      <span>取消忽略该依据</span>
                    </div>
                  </div>
                  <div class="detail-collect" v-else>
                    <div @click="getDetail(v)">
                      <img
                        src="@/assets/Images/AppIcon/icon_list_detail.png"
                        alt=""
                      />
                      <span>详细</span>
                    </div>

                    <div v-if="v.IsCollected" @click="unCollected(v)">
                      <img
                        src="@/assets/Images/AppIcon/icon_list_collect.png"
                        alt=""
                      />
                      <span>取消收藏</span>
                    </div>
                    <div v-else @click="Collect(v)">
                      <img
                        src="@/assets/Images/AppIcon/icon_list_notcollect.png"
                        alt=""
                      />
                      <span>收藏</span>
                    </div>
                  </div>
                  <div class="take-photo" v-if="hasPhoto" @click="goPhoto(v)">
                    <van-uploader
                      @oversize="onOversize"
                      :after-read="afterRead"
                      capture="camera"
                    >
                      <img
                        src="@/assets/Images/AppIcon/icon_camera.png"
                        alt=""
                      />
                      <span>拍照</span>
                    </van-uploader>
                  </div>
                  <div @click="chooseClassifys(v)" class="take-photo" v-else>
                    <img
                      src="@/assets/Images/AppIcon/icon_list_add.png"
                      alt=""
                    />
                    <span>选择</span>
                  </div>
                  <!-- <div class="take-photo">
										<img src="@/assets/Images/AppIcon/icon_camera.png" alt="" />
										<span>拍照</span>
									</div> -->
                </div>
              </div>
            </div>
          <!-- <div v-else>
            <img
              class="none-data"
              src="@/assets/Images/AppIcon/common_empty_data.png"
              alt=""
            />
          </div> -->
          </van-list>
        </div>
        <div v-if="idx == 4">
          <div>
            <div v-if="historyList.length" style="padding-bottom: 40px">
              <div
                v-for="(v, i) in historyList"
                :key="i"
                class="history-content"
              >
                <div>
                  <div class="history-title">【关键词】{{ v.Keyword }}</div>
                  <div class="line"></div>
                  <div>【隐患描述】{{ v.HiddenDangerDesc }}</div>
                  <div>【整改建议】{{ v.CorrectiveAdvise }}</div>

                  <div class="apply-area">
                    <div class="detail-collect">
                      <div @click="getDetail(v)">
                        <img
                          src="@/assets/Images/AppIcon/icon_list_detail.png"
                          alt=""
                        />
                        <span>详细</span>
                      </div>

                      <div v-if="v.IsCollected" @click="unCollected(v)">
                        <img
                          src="@/assets/Images/AppIcon/icon_list_collect.png"
                          alt=""
                        />
                        <span>取消收藏</span>
                      </div>
                      <div v-else @click="Collect(v)">
                        <img
                          src="@/assets/Images/AppIcon/icon_list_notcollect.png"
                          alt=""
                        />
                        <span>收藏</span>
                      </div>
                    </div>
                    <!-- <div class="take-photo" @click="goPhoto(v)">
											<van-uploader
												@oversize="onOversize"
												:after-read="afterRead"
												capture="camera"
											>
												<img
													src="@/assets/Images/AppIcon/icon_camera.png"
													alt=""
												/>
												<span>拍照</span>
											</van-uploader>
										</div> -->
                    <div class="take-photo" v-if="hasPhoto" @click="goPhoto(v)">
                      <van-uploader
                        @oversize="onOversize"
                        :after-read="afterRead"
                        capture="camera"
                      >
                        <img
                          src="@/assets/Images/AppIcon/icon_camera.png"
                          alt=""
                        />
                        <span>拍照</span>
                      </van-uploader>
                    </div>
                    <div class="take-photo" @click="chooseClassifys(v)" v-else>
                      <img
                        src="@/assets/Images/AppIcon/icon_list_add.png"
                        alt=""
                      />
                      <span>选择</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-else>
              <img
                class="none-data"
                src="@/assets/Images/AppIcon/common_empty_data.png"
                alt=""
              />
            </div>
            <eagle-button 
              type="primary"
              square
              @click="_goEditDanger">添加手动依据</eagle-button>
        
          </div>
        </div>
      </div>
    </eagle-tabs>
    <!-- 弹出层 -->
    <eagle-dialog title="详细信息" v-model="show" @close="close" @confirm="confirm" ref="eagleDialog">
      <div class="dialog-content-text">
        <div class="gist-source">
          <span class="dialog-description">来源：</span
          >{{ detail.GistSource }}
        </div>
        <div class="gist-source">
          <span class="dialog-description">隐患描述：</span
          >{{ detail.HiddenDangerDesc }}
        </div>
        <div class="gist-source">
          <span class="dialog-description">整改建议：</span
          >{{ detail.CorrectiveAdvise }}
        </div>
        <div class="gist-source">
          <span class="dialog-description">适用地区：</span
          >{{ detail.ApplyArea }}
        </div>
        <div class="gist-source">
          <span class="dialog-description">适用行业：</span
          >{{ detail.ApplyProfessionName }}
        </div>
        <div class="gist-source">
          <span class="dialog-description">法律责任：</span
          >{{ detail.LegalLiability }}
        </div>
        <div class="gist-source">
          <span class="dialog-description">法律原文：</span
          >{{ detail.OriginalText }}
        </div>
        <div class="gist-source">
          <span class="dialog-description">法律法规：</span>
          <div
            class="text-list"
            v-for="(v, i) in detail.TextList"
            :key="i"
            @click="toDetail(v)"
          >
            {{ v.Name }}
          </div>
        </div>
      </div>
    </eagle-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  components: {},
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_IMG,
      idx: 0,
      active: 0,
      filter: {
        type: "PublicUsed",
      },
      list: [],
      children: [],
      title: [
      { title: "专业依据" },  
      { title: "常用依据" },
        
        { title: "我的收藏" },
        { title: "历史依据" },
        { title: "手动依据" },
        { title: "已忽略" },
      ],
      value1: 0,
      value2: "a",
      option1: [
        { text: "全部", value: 0 },
        { text: "通用", value: 1 },
        { text: "行业专属", value: 2 },
      ],
      historyList: [],
      param: {
        page: 0,
        dataType: "",
      },
      show: false,
      detail: {},
      vobj: {},
      fileList: [],
      id: "",
      dataType: "PublicUsed",
      hasPhoto: "",
      loading: false,
      finished: false,
    };
  },
  computed: {
    // ...mapGetters(['baseUrl']),
  },
  created() {
    if (this.$route.query.hasPhoto) {
      this.hasPhoto = this.$route.query.hasPhoto;
    }
    if (this.$route.query.id || this.$route.query.id == 0) {
      this.id = this.$route.query.id;
      const ClassifysData = this.$route.query;
      this.$store.commit("setClassifysData", ClassifysData);
    }
    this.getClassifys();
  },
  activated() {},
  // beforeRouteLeave(to, from, next) {
  // 	to.params.id = this.$route.params.id
  // 	to.params.path = this.$route.params.path
  // 	next() //继续下一步
  // },
  methods: {
    // 搜索
    goSearch() {
      this.$router.push({
        name: "ClassifysSearch",
        query: {
          dataType: this.dataType,
          hasPhoto: this.hasPhoto,
        },
      });
    },
    goPhoto(item) {
      this.vobj = item;
    },
    // 上传图片
    afterRead(file) {
      let params = new FormData(); //创建form对象
      params.append("file", file.file);
      let _this = this;
      _this.$axios
      .post("/Attachment/UploadFiles",params)
      .then((res)=>{
        res.data.forEach((item) => {
          _this.fileList.push(item.FilePath);
          _this.$router.push({
            name: "DangerCheckTaskDetailEdit",
            params: {
              file: item.FilePath,
              vobj: _this.vobj,
            },
            query: {
              ctCode: _this.$route.query.ctCode || "",
              originType: 2,
            },
          });
        });
      }).catch((err) => {
        console.log("err", err);
      });
    },
    onOversize(file) {
      Toast("文件大小不能超过 2M");
    },
    getClassifys() {
      let _this = this;
       _this.$axios
      .get("/DangerLawGist/GetClassifys",{params:_this.filter})
      .then((res)=>{
        const data = _this.toTreeList(res.data);
        _this.list = data;
        _this.children = _this.list[0].children;
      })
    },
    // 选择检查依据
    chooseClassifys(item) {
      this.id = this.$store.state.ClassifysData.id;
      const path = this.$store.state.ClassifysData.path;
      if (this.id || this.id == 0) {
        this.$router.push({
          name: path,
          query: {
            classifysData: item,
            id: this.id,
          },
        });
      }
    },
    // 历史依据
    // getHistoryFrequency() {
    //   let _this = this;
    //   _this.$axios
    //   .get("/DangerLawGist/GetPageData",{params:_this.param})
    //   .then((res)=>{
    //     _this.historyList = res.data.Data;
    //   })
    // },

    getHistoryFrequency() {
      this.loading = true;
      let _this = this;
      _this.$axios
        .get("/DangerLawGist/GetPageData", { params: _this.param })
        .then((res) => {
          _this.loading = false;
          if (!res.data.HasNextPage) {
            _this.finished = true;
          }
          _this.historyList = res.data.Data;
          _this.param.page = res.data.PageIndex;
        });
    },
    onLoad() {
      this.loading = true;
      ++this.param.page;
      let _this = this;
      _this.$axios
        .get("/DangerLawGist/GetPageData", { params: _this.param })
        .then((res) => {
          _this.loading = false;
          _this.param.page = res.data.PageIndex;
          _this.historyList = _this.historyList.concat(res.data.Data);
          if (!res.data.HasNextPage) {
            _this.finished = true;
          }else{
            _this.finished = false;
          }
        });
    },

    // 收藏
    Collect(item) {
      const param = {
        lgCode: item.LGCode,
      };
      let _this = this;
      _this.$axios
      .get("/DangerLawGist/Collect",{params:param})
      .then((res)=>{
        _this.param.page = 0;
        _this.param.dataType = "HistoryFrequency";
        _this.getHistoryFrequency();
      })
    },
    // 取消收藏
    unCollected(item) {
      const param = {
        lgCode: item.LGCode,
      };
      let _this = this;
      _this.$axios
      .get("/DangerLawGist/UnCollected",{params:param})
      .then((res)=>{
        if (_this.idx == 2) {
          _this.param.page = 0;
          _this.param.dataType = "MyCollect";
          _this.getHistoryFrequency();
        }
        if (_this.idx == 3) {
          _this.param.page = 0;
          _this.param.dataType = "HistoryFrequency";
          _this.getHistoryFrequency();
        }
      })
    },
    // 详细getDetail
    getDetail(item) {
      const param = {
        lgCode: item.LGCode,
      };
      this.show = true;
      let _this = this;
      _this.$axios
      .get("/DangerLawGist/GetDetail",{params:param})
      .then((res)=>{
        res.data.TextList = JSON.parse(res.data.TextList);
        _this.detail = res.data;
      })
    },
    // 关闭
    close() {
      this.show = false;
    },
    confirm() {
      this.show = false;
    },
    // 切换顶部changeTabs
    changeTabs(val) {
      switch (val) {
        case 0:
          this.filter.type = "PublicUsed";
          this.dataType = "PublicUsed";
          this.getClassifys();
          break;
        case 1:
          this.filter.type = "Public";
          this.dataType = "Public";
          this.getClassifys();
          break;

        case 2:
          this.param.page = 0;
          this.param.dataType = "MyCollect";
          this.dataType = "MyCollect";
          this.finished = false;
          this.getHistoryFrequency();
          break;
        case 3:
          this.param.page = 0;
          this.param.dataType = "HistoryFrequency";
          this.dataType = "HistoryFrequency";
          this.finished = false;
          this.getHistoryFrequency();
          break;
        case 4:
          this.param.page = 0;
          this.param.dataType = "Company";
          this.dataType = "Company";
          this.finished = false;
          this.getHistoryFrequency();
          break;
        case 5:
          this.param.page = 0;
          this.param.dataType = "UnInterested";
          this.dataType = "UnInterested";
          this.finished = false;
          this.getHistoryFrequency();
          break;
      }
      this.idx = val;
    },
    clickNav(index) {
      this.active = index;
      this.children = this.list[index].children;
    },
    // 打开pdf
    toDetail(item) {
      // toDetail({id:item.id}).then(res=>{
      // 	console.log(res,'res');
      // })
    },
    // 处理数据
    toTreeList(data) {
      var result = [];
      if (!Array.isArray(data)) {
        return result;
      }
      data.forEach((item) => {
        delete item.children;
      });
      let map = {};
      data.forEach((item) => {
        map[item.CNo] = item;
      });

      data.forEach((item) => {
        let parent = map[item.CPNo];
        item.text = item.CName;
        if (parent) {
          (parent.children || (parent.children = [])).push(item);
        } else {
          result.push(item);
        }
      });
      return result;
    },
    goIndustryDescribe() {
      this.$router.push("/BaseInfo/IndustryDescribe");
    },
    // 添加手动依据
    _goEditDanger() {
      this.$router.push("/Danger/EditDanger");
    },
    // 检查依据详情
    _goClassifysDetail(item) {
      let root = this.list[this.active].CName;

      if (item.children) {
        this.$store.commit("setClassifysChildren", [
          {
            CCode: item.CCode,
            CFullName: null,
            CName: "全部",
            CNo: "",
            CPNo: "",
            Checked: null,
            DangerLawCount: null,
            ID: null,
            Logo: null,
            text: "全部",
          },
          ...item.children,
        ]);
      } else {
        this.$store.commit("setClassifysChildren", [
          {
            CCode: item.CCode,
            CFullName: null,
            CName: "全部",
            CNo: "",
            CPNo: "",
            Checked: null,
            DangerLawCount: null,
            ID: null,
            Logo: null,
            text: "全部",
          },
        ]);
      }
      this.$router.push({
        path: "/OtherDanger/classifysDetail",
        query: {
          cCode: item.CCode,
          hasPhoto: this.hasPhoto,
          ctCode: this.$route.query.ctCode || "",
          cName: root + "-" + item.CName,
        },
      });
    },
    // 取消忽略
    Interest(v) {
      const param = {
        lgCode: v.LGCode,
      };
      const _this = this;
      this.$dialog
        .confirm({
          title: "询问",
          message: "确定要忽略此条依据吗？",
        })
        .then(() => {
          let _this = this;
          _this.$axios
      	  .get("/DangerLawGist/Interest",{params:param})
          .then((res)=>{
            _this.getHistoryFrequency();
          })
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>

<style lang="less" scoped>
.main-content {
  min-height: 100vh;
  background-color: #e8f1f8;
}

.van-sidebar-item__text {
  width: 70px !important;
}
.ins_content {
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  .imgs-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 33.33%;
    margin-bottom: 20px;
    img {
      width: 50px;
      height: 50px;
      margin-bottom: 10px;
    }
    .imgs-list-text {
      display: flex;
      justify-content: center;
      width: 100%;
      font-size: 12px;
    }
  }
}

.history-content {
  overflow: hidden;
  padding: 10px;
  background-color: #fff;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.3;
  .line {
    width: 100%;
    height: 0.5px;
    background-color: #eee;
    margin: 5px;
  }
}
.apply-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
  .detail-collect,
  .take-photo {
    display: flex;
    align-items: center;

    > div {
      font-size: 14px;
      display: flex;
      align-items: center;
      margin-right: 30px;
    }
  }
  img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }
  .take-photo {
    img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
      vertical-align: middle;
    }
  }
}
// 手动依据
.add-btn {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
.none-data {
  width: 100%;
  height: 100%;
}
// 弹框
.dialog-content {
  position: relative;

  padding: 40px 0;

  .dialog-title,
  .dialog-bottom {
    width: 100%;
    position: fixed;
    left: 0;
    height: 40px;
    line-height: 40px;
    padding-left: 15px;
    font-size: 16px;
    background-color: #fff;
  }
  .dialog-title {
    top: 0;
  }
  .dialog-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    bottom: 0;
    padding: 0 15px;
    span {
      font-size: 14px;
      color: #666;
    }
    .complete-btn {
      color: rgb(0, 141, 101);
      margin-left: 20px;
    }
  }
}
.dialog-content-text {
  height: 50vh;
  overflow-y: auto;
  padding: 3px 15px;
  font-size: 13px;
  color: #666;
  .gist-source {
    margin-bottom: 15px;
    line-height: 1.3;
  }
  .gist-source:last-child {
    margin-bottom: 0;
  }
  .text-list {
    margin-top: 5px;
    color: rgb(0, 141, 101);
  }
  .dialog-description {
    color: #000;
  }
}
.dialog-content-text::-webkit-scrollbar {
  display: none;
}
</style>
